/**
 *  The slice widget is a 3D analysis tool that can be used to reveal occluded content in
 *  a {@link* module:esri/views/SceneView}. The slice widget can be applied to any layer type, making it possible
 * to see inside buildings or to explore geological surfaces.
 * @author Joker-lee
 * @date 2020-04-23
 */

import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { jsapi, viewUtils } from '@/utils/arcgis';
import styles from './index.less';
import { ConnectProps, ConnectState } from '@/models/connect';
import WidgetPanel from '@/components/containers/widgetPanel';

interface MapToolbarPropTypes extends ConnectProps {
  onClose: Function;
}

const ElevationProfile: React.FC<MapToolbarPropTypes> = props => {
  const domRef: React.RefObject<HTMLInputElement> = useRef<any>(null);
  const [loading, setLoading] = useState(true);
  const { onClose } = props;
  const elevationProfile = useRef<any>();

  useEffect(() => {
    creatWidget();
    return () => {
      // 组件卸载时需要将组件destroy
      elevationProfile.current && elevationProfile.current.destroy();
    };
    async function creatWidget() {
      const view = await viewUtils.isViewReady();
      const newDiv = document.createElement('div');
      const [ElevationProfile] = await jsapi.load(['esri/widgets/ElevationProfile']);
      elevationProfile.current = new ElevationProfile({
        view: view,
        container: newDiv,
        profiles: [
          {
            type: 'ground', // first profile line samples the ground elevation
          },
          {
            type: 'view', // second profile samples the view and shows building profiles
          },
        ],
        visibleElements: {
          selectButton: false,
        },
      });
      setLoading(false);
      if (domRef.current) {
        domRef.current.appendChild(newDiv);
      }
    }
  }, []);

  return (
    // <WidgetPanel title={'视线分析'} onClose={onClose}>
    <div className={styles.elevationProfile}>
      <div ref={domRef} />
      {loading && (
        <div className={styles['loading']}>
          <Spin
            size="large"
            spinning={loading}
            indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
          />
        </div>
      )}
    </div>

    // </WidgetPanel>
  );
};

export default ElevationProfile;
